<template>
	<view>
		<u-navbar title="修改收获地址" :border-bottom='false'>
			<view slot='right' style="padding-right: 32rpx;font-size: 32rpx;color: #FF4141;" @click="showTips=true">
				删除
			</view>
		</u-navbar>
		<view class="main">
			<u-form :model="addressFrom" ref="uForm" label-position='top'>
				<u-form-item :border-bottom='false' label="姓名" prop="consignee">
					<u-input v-model="addressFrom.consignee" placeholder='请输入收货人姓名' />
				</u-form-item>
				<u-form-item :border-bottom='false' label="手机号" prop="link">
					<u-input v-model="addressFrom.link" type='number' placeholder='请输入收货人手机号' />
				</u-form-item>
				<u-form-item :border-bottom='false' label="收货地址" prop="province">
					<u-input v-model="addressFrom.province" disabled placeholder='请选择所在地区' />
					<view slot='right' class="slot-class" @click='showPicker= true'>
						<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :border-bottom='false' label="详细地址" prop="address">
					<u-input v-model="addressFrom.address" placeholder='如：街道、门牌、小区、单元' />
				</u-form-item>
			</u-form>
			<view class="checkbox">
				<u-checkbox v-model='checked' shape="circle" @change='checkedFn'></u-checkbox>
				<text>设为默认地址</text>
			</view>
			<view class="sunBtn" @click="submitSave">
				保存
			</view>
		</view>
		<u-picker v-model="showPicker" mode="region" @confirm='confirmFn'></u-picker>
		<u-modal v-model="showTips" :content="content" confirm-text='删除' confirm-color='#FF4141'
			:show-cancel-button='true' @confirm='confirmDel'></u-modal>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				content: '确认要删除该地址吗？',
				showTips: false,
				showPicker: false,
				checked: false,
				addressFrom: {
					consignee: '',
					link: '',
					province: '',
					address: ''
				},
				is_default: '',
				addressId: '',
				province_code: '',
				city_code: '',
				district_code: '',
				rules: {
					consignee: [{
						required: true,
						message: '请输入收货人姓名',
						trigger: 'blur',
					}],
					link: [{
						required: true,
						message: '请输入收货人手机号',
						trigger: 'blur'
					}],
					province: [{
						required: false,
						message: '请选择收货地址',
						trigger: 'change'
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: 'blur'
					}]
				},
			}
		},
		onLoad(option) {
			this.addressId = option.address_id
			this.getAddress()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		methods: {
			checkedFn(e) {
				if (e.value) {
					this.is_default = 1
				} else {
					this.is_default = 0
				}
			},
			// 获取当前地址信息
			async getAddress() {
				let res = await myRequest.getMyaddress()
				if (res.status) {
					res.data.forEach(item => {
						if (item.address_id == this.addressId) {
							this.addressFrom.consignee = item.consignee
							this.addressFrom.link = item.link
							this.addressFrom.address = item.address
							this.addressFrom.province = item.province + ' ' + item.city + ' ' + item.district
							this.checked = item.is_default == 1 ? true : false
							this.is_default = item.is_default
							// 未选择省份,默认之前省份
							this.province_code = item.province_code
							this.city_code = item.city_code
							this.district_code = item.district_code
						}
					})
				}
			},
			// 删除地址
			async confirmDel() {
				let {
					addressId
				} = this
				let res = await myRequest.delMyaddress({
					address_id: addressId
				})
				if (res.status) {
					uni.showToast({
						title: '删除成功'
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				}
			},

			confirmFn(e) {
				this.addressFrom.province = e.province.label + ' ' + e.city.label + ' ' + e.area.label
				this.province_code = e.province.value + '0000'
				this.city_code = e.city.value + '00'
				this.district_code = e.area.value
			},
			// 编辑保存
			submitSave() {
				let {
					is_default,
					province_code,
					city_code,
					district_code,
					addressId
				} = this
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						let res = await myRequest.addMyaddress({
							consignee: this.addressFrom.consignee,
							link: this.addressFrom.link,
							address: this.addressFrom.address,
							province_code: province_code,
							city_code: city_code,
							district_code: district_code,
							address_id: addressId,
							is_default: is_default.toString()
						})
						if (res.status) {
							uni.showToast({
								title: '修改成功',
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 32rpx 28rpx;

		.checkbox {
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
				color: #999999;
			}
		}

		.sunBtn {
			margin: 140rpx auto 0;
			width: 660rpx;
			height: 100rpx;
			background: linear-gradient(180deg, #50A3FE 0%, #3064FC 100%);
			border-radius: 16rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 100rpx;
			color: #FFFFFF;
		}

		.slot-class {
			image {
				width: 20rpx;
				height: 32rpx;
			}


		}
	}



	/deep/ .u-form-item {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
	}

	/deep/ .u-checkbox__label {
		margin-left: 0;
	}
</style>
